import React,{useState,useEffect} from 'react'
import {Table,Button,Modal,Tree} from 'antd'
import axios from 'axios'
import {
  DeleteOutlined,
  UnorderedListOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'

const {confirm} =Modal
export default function RoleList() {
  const [dataSource,setDataSource] = useState([])
  // 属性结构的状态
  const [rightList,setRightList] = useState([])
  //树形结构点击的当前这一项的
  // 设置item.rights的状态
  const [current,setCurrent] = useState([])
  // 设置一个状态，用来存储修改的那个ID
  const [currentId,setCurrentId] = useState(0)
  const [isModalVisible,setIsModalVisible] =useState(false)
  useEffect(()=>{
    axios.get('http://localhost:5000/roles').then(res=>{
     setDataSource(res.data)
    })
   },[])
  //  请求树状结构里面的权限数据
   useEffect(()=>{
    axios.get('http://localhost:5000/rights?_embed=children').then(res=>{
      // 因为树形结构遍历的属性与后台的属性不太一致，所以修改得到数据的时候进行修改一下
      res.data.forEach(item=>{
        item.title=item.label
        if(item.children.length>0){
          item.children.forEach(child=>{
            child.title=child.label
          })
        }
      })
      setRightList(res.data)
      console.log(res.data)
    })
   },[])
  const columns=[
    {
      title:'ID',
      dataIndex:'id',
      render:(id)=>{
        return <b>{id}</b>
      }
    },
    {
      title:'角色名称',
      dataIndex:'roleName',
    },{
      title:'操作',
      // render的参数item是点击的那一条对象
      render:(item)=>{
        return <div>
          {/* 加上antd的按钮属性 */}
          <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick={()=>confirmMytile(item)}/> {/**删除按钮 */}
          {/* 给按钮添加一个点击事件，点击时状态的值给true，使得Modal对话框显示*/}
             <Button onClick={()=>{
              setIsModalVisible(true)
              // 将点击的那项rights设置成动态的状态，拿到当前点击的那一项的权限列表
              setCurrent(item.rights)
              // 同步一下item.id,就是当前选中的那一项
              setCurrentId(item.id)
             }
              } type="primary" shape="circle" icon={<UnorderedListOutlined />} />
          </div>
      } 
    }
  ]
  const confirmMytile=(item)=>{
    confirm({
      title: '你确定删除嘛?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        // console.log(item);
        deleteObject(item)
      },
      onCancel() {
        console.log('取消');
      },
    });
  }
  const deleteObject=(item)=>{
    console.log(item)
    setDataSource(dataSource.filter(data=>data.id!==item.id))
    // 在后台数据删掉这条项目对象
    axios.delete(`http://localhost:5000/roles/${item.id}`)
  }
  // 成功的处理函数
  const handleOk=()=>{
    setIsModalVisible(false)
    // console.log(dataSource[0].rights)
    setCurrent(current.checked)
    // 同步DataSource 提前设置一个状态，用来存储id，知道修改的是哪条数据
    setDataSource(dataSource.map(item=>{
      //相当于匹配到要修改的那一项了 判断item.id跟我们点击分配权限的id是否相等
      if(item.id===currentId){
        return {
          // 展开item，把最新的rightList赋值给current
          ...item,
          rights:current
        }
      }
      return item
    }
    ))
    // put到后端  同步后端数据
    axios.patch(`http://localhost:5000/roles/${currentId}`,{
      rights:current
    })
  } 
  // 失败的处理函数
  const handleCancel=()=>{
    setIsModalVisible(false)
  }
  //checkedKeys这个参数 返回的是点击的剩余的参数
  const onCheck=(checkedKeys)=>{
    // console.log(checkedKeys)
    // 得到新的数据赋值给状态
    setCurrent(checkedKeys)
  }
  return (<div>
    <Table dataSource={dataSource} columns={columns} rowKey={(item)=>item.id}></Table>
    {/* 弹出来的对话框  */}
    <Modal title="权限分配" open={isModalVisible} onOk={handleOk} onCancel={handleCancel} >
      <Tree
        checkable   //可选择的
        // 原来的是defaultCheckedKeys是非受控组件，只有第一次修改的时候生效，后面修改的时候不会生效，所以去掉default。 需要动态获取点击的rights，所以需要在点击的时候设置一个状态并将点击的item。rights传递过来。
        //但是因为是受控组件，没有选中的后期直接点击选中的话是无法选中的，只能通过修改状态才可以修改。
        //再点击每一项的时候，需要知道当前这一项的rights的值，提前设置好一个状态，点击的这一刻知道这一项的值，把这一项rights的数组赋值给状态，接收状态的改变，而不断的显示新的内容
        checkedKeys={current}
        // onCheck的第一个参数是checkKeys能拿到点击的那项。
        onCheck={onCheck}
        // 因为二级里有的不是直接选中的状态，父子相关联导致都被选中，所以要用到antd的tree树状控件的checkStrivtly属性，这个属性在checkable状态下节点选择完全受控（父子节点选中状态不再关联。默认值是false，改成true）
        checkStrictly={true}
        treeData={rightList}
      >
      </Tree>
    </Modal>
    </div>

  )
}
